<template>
  <div class="user-profile">
    <!-- 导航栏 -->
    <van-nav-bar
      class="page-nav-bar"
      title="个人信息"
      left-arrow
      @click-left="$router.back()"
    />
    <input type="file" ref="files" hidden @change="changeAvator" />

    <!-- /导航栏 -->
    <van-cell title="头像" is-link @click="$refs.files.click()">
      <van-image class="avatar" fit="cover" round :src="userInfo.photo" />
    </van-cell>
    <van-cell
      title="昵称"
      :value="userInfo.name"
      is-link
      @click="isShowUpdateName = true"
    />
    <van-cell
      title="性别"
      :value="userInfo.gender ? '女' : '男'"
      is-link
      @click="isShowUpdateGender = true"
    />
    <van-cell
      title="生日"
      :value="userInfo.birthday"
      is-link
      @click="isShowUpdateBirthdy = true"
    />

    <!-- 修改昵称 -->
    <van-popup
      v-model="isShowUpdateName"
      position="bottom"
      :style="{ height: '100%' }"
      class="popup"
    >
      <modefy-name
        v-if="isShowUpdateName"
        @close="isShowUpdateName = false"
        v-model="userInfo.name"
      ></modefy-name>
    </van-popup>

    <!-- 修改性别 -->
    <van-popup v-model="isShowUpdateGender" position="bottom">
      <update-gender
        v-if="isShowUpdateGender"
        v-model="userInfo.gender"
        @close="isShowUpdateGender = false"
      />
    </van-popup>

    <!-- 修改生日 -->
    <van-popup v-model="isShowUpdateBirthdy" position="bottom">
      <update-birthdy
        v-if="isShowUpdateBirthdy"
        v-model="userInfo.birthday"
        @close="isShowUpdateBirthdy = false"
      ></update-birthdy>
    </van-popup>

    <!-- 修改头像 -->
    <van-popup
      v-model="isShowUpdateAvatar"
      position="bottom"
      :style="{ height: '100%' }"
      class="popup"
    >
      <update-avatar :img="img" @close="closeFn"></update-avatar>
    </van-popup>
  </div>
</template>
<script>
import { getUserProfile } from "@/api/login";
import ModefyName from "./components/modefyname.vue";
import UpdateGender from "./components/updategender.vue";
import UpdateBirthdy from "./components/UpdateBirthdy.vue";
import UpdateAvatar from "./components/UpdateAvatar.vue";
export default {
  components: {
    ModefyName,
    UpdateGender,
    UpdateBirthdy,
    UpdateAvatar,
  },
  data() {
    return {
      userInfo: {},
      isShowUpdateName: false,
      isShowUpdateGender: false,
      isShowUpdateBirthdy: false,
      isShowUpdateAvatar: false,
      img: "", //图片的地址
    };
  },
  created() {
    this.getUserProfileFn();
  },
  methods: {
    async getUserProfileFn() {
      let {
        data: { data },
      } = await getUserProfile();
      this.userInfo = data;
    },
    changeAvator() {
      const file = this.$refs.files.files[0];
      console.log(file);
      this.img = window.URL.createObjectURL(file); //Url的这个方法是window下面的方法
      this.isShowUpdateAvatar = true;
      this.$refs.files.value = "";
    },
    closeFn(value) {
      this.isShowUpdateAvatar = false;
      if (value) {
        this.userInfo.photo = value;
      }
    },
  },
};
</script>

<style scoped lang='less'>
.user-profile {
  .page-nav-bar {
    background-color: #3296fa;
  }
  .avatar {
    width: 60px;
    height: 60px;
  }
}
.popup {
  background-color: rgb(240, 236, 236);
}
</style>